<template>
    <div>
        <div class="login-grid">
            <!-- 左边栏 -->
            <div class="login-left">
                <div class="login-container-left">
                    <div class="login-content animate__animated animate__bounceInLeft">
                        <h2 class="login-title">Weblog 博客登录</h2>
                        <p class="login-desc">一款由 Spring Boot + Mybaits Plus + Vue 3.2 + Vite 4 开发的前后端分离博客。</p>
                        <img src="@/assets/developer.png" class="login-image">
                    </div>
                </div>
            </div>
            <!-- 右边栏 -->
            <div class="login-right">
                <div class="login-container-right">
                    <h2 class="welcome-title">欢迎回来</h2>
                    <div class="divider">
                        <span class="divider-line"></span>
                        <span class="divider-text">账号密码登录</span>
                        <span class="divider-line"></span>
                    </div>
                    <div class="form-container">
                        <el-form ref="formRef" :rules="rules" :model="form" class="login-form">
                            <el-form-item prop="username">
                                <el-input v-model="form.username" :prefix-icon="User" placeholder="请输入用户名" size="large"
                                    clearable />
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model="form.password" type="password" autocomplete="off" :prefix-icon="Lock"
                                    placeholder="请输入密码" show-password size="large" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-button round type="primary" @click="onSubmit" :loading="loading"
                                    class="login-btn" size="large">
                                    登 录
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
import { login } from '@/api/admin/user';
import { showMessage } from '@/composables/util'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { setToken } from '@/composables/auth'
import { User, Lock } from '@element-plus/icons-vue'

const router = useRouter()
const store = useStore()

const form = reactive({
    username: 'admin',
    password: '123456',
})

const rules = {
    username: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        },
    ]
}


const formRef = ref(null)
const loading = ref(false)

const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return false
        }
        loading.value = true
        login(form.username, form.password)
            .then(res => {
                if (res.success == true) {
                    showMessage('登录成功', 'success')
                    setToken(res.data.token)
                    
                    store.dispatch('getAdminInfo')
                    
                    router.push('/admin')
                } else {
                    showMessage(res.message, 'error')
                }
            }).finally(() => {
                loading.value = false
            })
    })
}

function onKeyUp(e) {
    console.log(e)
    if (e.key == 'Enter') {
        onSubmit()
    }
}

// 添加键盘监听
onMounted(() => {
    console.log('添加键盘监听')
    document.addEventListener('keyup', onKeyUp)
})

// 移除键盘监听
onBeforeUnmount(() => {
    document.removeEventListener('keyup', onKeyUp)
})

</script>

<style scoped>
.login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 将页面分为两等份 */
    height: 100vh;
    background-color: #fff;
}

.login-left {
    grid-column: span 1;
}

.login-right {
    grid-column: span 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
}

.login-container-left {
    height: 100%;
    background: #001428;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.login-container-right {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.welcome-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5rem;
}

.divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.divider-text {
    padding: 0 1rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.form-container {
    margin-top: 2rem;
}

.login-form {
    width: 100%;
}

.login-btn {
    width: 100%;
    margin-top: 1rem;
}

.login-image {
    max-width: 100%;
    height: auto;
    max-height: 450px;
}

.login-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.login-desc {
    text-align: center;
    margin-bottom: 2rem;
    max-width: 80%;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .login-grid {
        grid-template-columns: 1fr;
    }
    
    .login-left {
        display: none;
    }
    
    .login-right {
        grid-column: span 1;
        padding: 2rem;
    }
}
</style>